<template>
	<view class="content">
		<f-navbar title="店铺信息" fontColor="#333" fontSize="34" bgColor="#fff">
			<view class="u-flex" slot="left">
				<van-icon name="arrow-left" color="#333" size="20" />
			</view>
		</f-navbar>
		<view class="content_box">
			<view class="content_topimg" @click="onUploadavatar">
				<view class="content_toptitle">商铺照片</view>
				<view class="content_topR">
					<view class="content_img">
						<image class="avatarimg" :src="avatarimg" mode=""></image>
					</view>
					<van-icon name="arrow" size="16" color="#999" />
				</view>
			</view>
			<view class="content_namebox" >
				<view class="content_name">商铺名称</view>
				<!-- <view class="content_nameR">{{nickname}}</view> -->
				<input :value="nickname" @input="onname" type="text" class="phone_input" placeholder-class="place_class" placeholder="请输入店铺名称">
			</view>
			<view class="content_namebox" >
				<view class="content_name">手机号</view>
				<view class="content_nameR">{{phonenum}}
					<!-- <van-icon class="right_icon" name="arrow" size="16" color="#999" /> -->
				</view>
			</view>
			<view class="content_namebox" @click="onpassword">
				<view class="content_name">修改密码</view>
				<view class="content_nameR">
					<van-icon class="right_icon" name="arrow" size="16" color="#999" />
				</view>
			</view>
			 <view class="chengnuo_box">
			 	<view class="chengnuo_boxname">商家承诺</view>
			 	<view class="chengnuo_boxR">
			 		<textarea :value="chengnuo" @input="onchengnuo" class="text_input" 	auto-height placeholder-class="place_class" placeholder="请输入商家承诺，例如：破损包运费、不满意退换货、3公里免费配送"></textarea>
			 	</view>
			 </view>
			 <view class="content_namebox" @click="onlogout">
			 	<view class="content_name">退出登录</view>
			 	<view class="content_nameR">
			 		<van-icon class="right_icon" name="arrow" size="16" color="#999" />
			 	</view>
			 </view>
			 <view class="bottom_box">
			 	<view class="bottom_btn" @click="onbaocun">
			 		保存
			 	</view>
			 </view>
			 <van-dialog :show="islogout" title="退出登录" @confirm="onconfirm" @cancel="oncancel" showCancelButton id="van-dialog" />
		</view>
	</view>
</template>

<script>
	import fNavbar from '@/uni_modules/f-navbar/components/f-navbar/f-navbar.vue';
	import {getBaseStoreInfo,setStore} from '../../../utils/storeapp.js'
	export default {
		components: {
			fNavbar
		},
		data() {
			return {
				avatarimg:'',
				nickname:'',
				phonenum:'',
				chengnuo:'', // 承诺
				imgurl: getApp().globalData.imgurl,
				apiUrl: getApp().globalData.apiUrl,
				islogout:false, // 退出登录弹窗
				dataList:{}, // 店铺信息
			
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			// 保存
			onbaocun(){
				setStore({
					logo: this.avatarimg,
					name:this.nickname,
					promise: this.chengnuo
				}).then(res => {
					if(res.code!==1){
						uni.showToast({
							title: res.info,
							icon:'none',
							duration:2000
						})
					} else {
						uni.showToast({
							title: res.info,
							icon:'none',
							duration:2000
						})
					}
					console.log(res);
				})
			},
			// 获取数据
			getList(){
				getBaseStoreInfo({
				}).then(res => {
					if(res.code==1){
						console.log(res.data);
						// this.dataList = res.data
						this.nickname = res.data.name
						this.phonenum = res.data.phone
						this.chengnuo = res.data.promise
						this.avatarimg = res.data.logo
					}else {
						uni.showToast({
							title: res.info,
							icon:'none',
							duration:2000
						})
					}

				
				})
			},
			// 退出确认按钮
			onconfirm(){
				this.islogout = false
				uni.removeStorageSync('admintoken')
				uni.reLaunch({
					url:'/pages/my/my'
				})
			},
			// 退出取消按钮
			oncancel(e){
				console.log(e);
				this.islogout = false
			},
			// 退出登录
			onlogout(){
				this.islogout = true
			},
			// 输入商家承诺
			onchengnuo(e){
				this.chengnuo = e.detail.value
			},
			// 跳转到修改手机号页面
			// onphonenum(){
				// uni.navigateTo({
				// 	url:'/pages/editphone/editphone'
				// })
			// },
			// 修改昵称页面
			onname(e){
				console.log(e);
				this.nickname = e.detail.value

			},
			
			// 跳转到修改密码页面
			onpassword(){
				uni.navigateTo({
					url:'/pages/subPack/ChangePassword/ChangePassword'
				})
			},
			
			
			// 上传头像
			onUploadavatar() {

				uni.chooseImage({
					sourceType: ['camera','album'], //从相册选择
					success: chooseImageRes => {
						console.log('成功', chooseImageRes);
						const tempFilePaths = chooseImageRes.tempFilePaths[0];
						console.log(tempFilePaths);
						// this.avatarimg = tempFilePaths
						uni.uploadFile({
							url: this.apiUrl+'api/uploadFile', //仅为示例，非真实的接口地址
							filePath: tempFilePaths,
							name: 'file',
							// header: {
							// 	accessToken: uni.getStorageSync('accessToken'),
							// 	platform: 2,
							// 	type: 1
							// },
							formData: {
								file:tempFilePaths,
								type:'1'
							},
							success: res => {
								console.log(res);
								let data1 = JSON.parse(res.data)
								console.log(data1);
								if(data1.code==1){
									this.avatarimg = data1.data.url
									// setUserInfo({
									// 	fields:data1.data.url,
									// 	type:2
									// }).then(res1 => {
									// 	if(res1.code==1){
									// 		this.getList()
									// 	}
									// })
								}
								// console.log('上传成功', JSON.parse(res.data));
								// uploadFile上传成功后，根据和后台的约定msgCode判断接口调用状态
				
							}
						});
					},
					// fail: err => {
					// 	this.myToast('图片上传失败', 'none');
					// }
				});
			},
		},
		onShow:function() {
			var that = this;
			var pages = getCurrentPages();
			var currPage = pages[pages.length - 1]; //当前页面
			let res = currPage.data.userdata;
			if(res!==undefined){
			console.log(res)//为传过来的值
			this.nickname = res.name	
			this.phonenum = res.phonenum
			}
	
		}
	}
</script>

<style>
	page {
		background: #eee;
	}

	.place_class {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #BBBBBB;

	}
	.phone_input {
		text-align: right;
		padding-right: 30rpx;
	}
	.content_topimg {
		width: 100%;
		height: 109rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 4rpx;
		background: #fff;
	}

	.content_toptitle {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: 600;
		color: #333333;
		margin-left: 30rpx;
	}

	.content_topR {
		display: flex;
		align-items: center;
		margin-right: 30rpx;
	}

	.content_img {
		width: 68rpx;
		height: 68rpx;
		/* background: #88ABDA; */
		border-radius: 50%;
		margin-right: 16rpx;
		z-index: 99;
	}

	.content_namebox {
		width: 100%;
		height: 109rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		border-top: 1rpx solid #eee;
	}

	.content_name {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: 600;
		color: #333333;
		margin-left: 30rpx;
	}

	.content_nameR {
		/* display: flex;
		align-items: center; */
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #BBBBBB;
		margin-right: 30rpx;
	}

	.right_icon {
		margin-left: 8rpx;
	}
	.avatarimg{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.chengnuo_box{
		width: 100%;
		/* height: 109rpx; */
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		background: #fff;
		border-top: 1rpx solid #eee;
		padding: 40rpx 0;
	}
	.chengnuo_boxname{
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: 600;
		color: #333333;
		margin-left: 30rpx;
	}
	.chengnuo_boxR{
		width: 490rpx;
		/* min-height: 90rpx; */
		margin-right: 30rpx;
	}
	.place_class{
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #BBBBBB;
		
	}
	.text_input{
		width: 480rpx;
		min-height: 100rpx;
		line-height: 40rpx;
	}
	.bottom_box{
		width: 100%;
		height: 96rpx;
		background: #FFFEFE;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 0;
	}
	.bottom_btn{
		width: 154rpx;
		height: 60rpx;
		background: #EF0E6C;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 60rpx;
		text-align: center;
	}
	
	
</style>